<script setup>
import Header from '@/views/BookInformation/components/header.vue'
import Content from "@/views/BookInformation/components/content.vue";
import Footer from "@/views/BookInformation/components/footer.vue"
import Nav from "@/components/Nav/nav-parallax.vue";
import { useScroll } from '@vueuse/core'
import { ref,onMounted } from "vue";

const { y } = useScroll(window)
const isCeiling = ref('')
const emit = defineEmits(['updateCeiling'])
const getIsCeiling = (value) => {
  isCeiling.value = value
}
onMounted(() => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>

<template>
  <div class="main">
    <div>
      <Nav class="nav"></Nav>
    </div>
    <div class="BookInformation">
      <div class="header">
        <Header></Header>
      </div>
      <div>
        <Content @updateCeiling="getIsCeiling"></Content>
      </div>
    </div>
  </div>
  <div class="footer">
    <Footer></Footer>
  </div>
</template>

<style scoped>
* {
  box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的宽度 */
}

html, body {
  margin: 0;
  padding: 0;
}

.main {
  display: flex;
  flex-direction: column;
  background-color: #f2f2f2;
  width: 100%;
  overflow-x: hidden; /*防止内容溢出导致的横向滚动条*/ 
}

.BookInformation {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #f2f2f2;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.nav {
  width: 100%;
  height: 80px;
  background-color: #fff;
}

.footer {
  width: 100%;
}
</style>